<template>
    <div class="login-container">
        <div class="login-container-left">
            <el-image style="width: 650px; height: 500px ; border-radius: 5px;" :src="url" />
        </div>
        <div class="login-container-right">
            <h1 class="login-text">登录</h1>
            <el-form :model="user" :rules="rules" label-width="120px" class="login-form" status-icon hide-required-asterisk
                @keyup.enter.native="LoginClick">
                <!-- 用户名 -->
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="user.username" type="text" />
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="密码" prop="password">
                    <el-input v-model="user.password" type="password" show-password />
                </el-form-item>
                <!-- 身份 -->
                <el-form-item label="身份" prop="identity">
                    <el-select v-model="user.identity" class="m-2">
                        <el-option v-for="item in identitys" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <!-- 登录按钮  -->
                <el-form-item>
                    <el-button type="primary" @click="LoginClick" :disabled="!canSubmit">登录</el-button>
                    <el-button type="primary" @click="Gotoregister">前往注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { usestore } from '../store'
import api from '../api/api';
import { ElMessage } from 'element-plus';


const router = useRouter()
const store = usestore()

const url = ref('https://guet-lab.oss-cn-hangzhou.aliyuncs.com/api/2022/11/18/5d296990-5d2b-4245-86f7-f34a4da52a3b.jpg')

const user = reactive({//初始化
    username: '',
    password: '',
    identity: 1
})

const identitys = [
    {
        value: 0,
        label: '管理员',
    },
    {
        value: 1,
        label: '普通用户',
    },
]

const rules = reactive({//验证
    username: [
        { required: true, message: '用户名必填', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码必填', trigger: 'blur' },
        { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' },
    ],
    identity: [
        { required: true, message: '请选择身份', trigger: 'blur' },
    ]
})


function LoginClick() {
    store.username = user.username
    store.identity = user.identity

    localStorage.setItem('username', user.username)
    localStorage.setItem('identity', user.identity.toString())

    if (user.identity) {
        //普通用户登录
        api.userLogin({ username: user.username, password: user.password }).then(
            res => {
                if (res.data.code == 200) {
                    ElMessage({
                        message: '登入成功',
                        type: 'success'
                    })
                    localStorage.setItem('token', document.cookie.split('=')[1])//存储token
                    store.token = document.cookie.split('=')[1]//存储token
                    router.push({
                        name: 'Uhome'
                    })
                    const { data } = res.data
                    store.user = data
                }
            }).catch(err => { console.log(err) })
    } else {
        // 管理员登录
        api.AdminLogin({ username: user.username, password: user.password }).then(
            res => {
                if (res.data.code == 200) {
                    ElMessage({
                        message: '登入成功',
                        type: 'success'
                    })
                    localStorage.setItem('token', document.cookie.split('=')[1])//存储token
                    store.token = document.cookie.split('=')[1]//存储token
                    router.push({
                        name: 'Ahome'
                    })
                    const { data } = res.data
                    store.user.username = data.adminName
                    store.user.userId = data.adminId
                    store.user.userPassword = data.adminPassword
                }
            }).catch(err => { console.log(err) })
    }
}

function Gotoregister() {
    router.push({
        name: 'register'
    })
}


//一个只读的计算属性
const canSubmit = computed(() => {
    const { username, password } = user
    return Boolean(username && password)
})



onMounted(() => {

})
</script>

<style scoped>
.login-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-form {
    width: 25vw;
    min-width: 300px;
    margin-right: 100px;
}

.login-text {
    margin-left: 120px;
    font-size: 40px;
}

.el-form-item {
    margin-bottom: 22px;
}

.login-container-right {
    width: 350px;
}
</style>